<template>
  <view class="container">
    <!-- 美食标题 -->
    <view class="header">
      <text class="title">肉燕</text>
    </view>
    
    <!-- 主要内容区域 -->
    <scroll-view scroll-y class="content">
      <!-- 美食图片 -->
      <view class="main-image">
        <image src="/static/food/ry.jpg" mode="aspectFill"></image>
      </view>
      
      <!-- 美食描述 -->
      <view class="description">
        <text class="desc-title">美食简介</text>
        <text class="desc-content">福州肉燕是福建省福州市的传统名小吃，被誉为"福州三宝"之一。它的独特之处在于其皮是用新鲜猪瘦肉捶打而成，而非普通的面粉皮，因此口感独特，薄如蝉翼，色泽晶莹剔透。</text>
        
        <text class="desc-content">肉燕的制作工艺非常独特。首先，选用猪后腿肉，去除筋膜，然后用木锤反复捶打至肉泥状，再加入适量的地瓜粉，擀制成薄如纸张的燕皮。内馅则通常由猪肉、虾仁、香菇等食材调制而成，味道鲜美。包好的肉燕煮熟后，皮薄而有韧性，馅料鲜香多汁，口感绝佳。</text>
        
        <text class="desc-content">肉燕不仅是福州人的日常美食，更是福州传统文化的重要组成部分。在福州的传统习俗中，肉燕有着特殊的寓意，象征着团圆和幸福。在喜庆的场合，如婚礼、生日等，人们常常会准备肉燕来庆祝。2008年，福州肉燕制作技艺被列入国家级非物质文化遗产名录。</text>
      </view>
      
      <!-- 美食特色 -->
      <view class="features">
        <text class="section-title">美食特色</text>
        
        <view class="feature-list">
          <view class="feature-item">
            <text class="feature-icon">🐷</text>
            <text class="feature-text">纯肉制皮</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">📄</text>
            <text class="feature-text">薄如蝉翼</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🍤</text>
            <text class="feature-text">鲜香馅料</text>
          </view>
          <view class="feature-item">
            <text class="feature-icon">🏆</text>
            <text class="feature-text">非遗美食</text>
          </view>
        </view>
      </view>
      
      <!-- 推荐店铺 -->
      <view class="shops">
        <text class="section-title">推荐店铺</text>
        
        <view class="shop-list">
          <view class="shop-item">
            <text class="shop-name">同利肉燕老铺</text>
            <text class="shop-address">福州市鼓楼区南后街82号</text>
            <text class="shop-feature">创建于1876年，百年老字号</text>
          </view>
          <view class="shop-item">
            <text class="shop-name">永和鱼丸肉燕店</text>
            <text class="shop-address">福州市台江区八一七中路</text>
            <text class="shop-feature">老字号，肉燕鱼丸双绝</text>
          </view>
          <view class="shop-item">
            <text class="shop-name">耳聋伯元宵</text>
            <text class="shop-address">福州市台江区隆平路39号</text>
            <text class="shop-feature">传统工艺，口感正宗</text>
          </view>
        </view>
      </view>
      
      <!-- 底部间距 -->
      <view style="height: 40rpx;"></view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      
    }
  },
  methods: {
    
  }
}
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f8f8f8;
}

.header {
  padding: 30rpx;
  text-align: center;
  background-color: #FFB703;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
}

.content {
  flex: 1;
}

.main-image {
  width: 100%;
  height: 400rpx;
  overflow: hidden;
}

.main-image image {
  width: 100%;
  height: 100%;
}

.description {
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.desc-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.desc-content {
  display: block;
  font-size: 32rpx;
  color: #666;
  line-height: 1.8;
  margin-bottom: 20rpx;
}

.features {
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.section-title {
  display: block;
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30rpx;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background-color: rgba(255, 183, 3, 0.05);
  padding: 20rpx;
  border-radius: 10rpx;
}

.feature-icon {
  font-size: 48rpx;
}

.feature-text {
  font-size: 28rpx;
  color: #333;
}

.shops {
  padding: 40rpx;
  background-color: #fff;
}

.shop-list {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.shop-item {
  padding: 30rpx;
  background-color: #f9f9f9;
  border-radius: 10rpx;
  border-left: 6rpx solid #FFB703;
}

.shop-name {
  display: block;
  font-size: 34rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
}

.shop-address {
  display: block;
  font-size: 30rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.shop-feature {
  display: block;
  font-size: 28rpx;
  color: #FFB703;
}
</style>